<template>
  <div class="header_top">
    <v-head />
    <!-- 内页banner -->
    <v-ban />
    <!-- 列表 -->
    <div class="list_srory p7090">
      <div class="container">
        <!-- <div class="shaixuan">
          <ul class="clearfix">
            <li>
              <a
                href="javascript:;"
                @click="timeClick"
                :class="{ active: isActive === 1 }"
                >最新发布</a
              >
            </li>
            <li>
              <a
                href="javascript:;"
                @click="hotClick"
                :class="{ active: isActive === 2 }"
                >热门点击</a
              >
            </li>
            <li>
              <a
                href="javascript:;"
                @click="mostInvolved"
                :class="{ active: isActive === 3 }"
                >最多参加</a
              >
            </li>
          </ul>
        </div> -->
        <ul class="clearfix story_ul row">
          <li class="col-md-6" v-for="item in this.userList" :key="item.id">
            <div class="clearfix">
              <!--  -->
              <router-link
                :to="{ path: '/stroyshow', query: { id: item.id } }"
                class="fl left bl"
              >
                <div class="img">
                  <img :src="$api + item.image" class="w100" alt="" />
                </div>
              </router-link>
              <div class="fr right">
                <div class="clearfix data">
                  <div class="fl">{{ item.create_time | formatDate }}</div>
                  <div class="fr">
                    <i class="iconfont icon-yanjing"></i>{{ item.views }}
                  </div>
                </div>
                <router-link
                  :to="{ path: '/stroyshow', query: { id: item.id } }"
                  class="bl name line2"
                  >{{ item.title }}</router-link
                >
                <div class="text line2" v-html="item.content"></div>
              </div>
            </div>
          </li>
        </ul>
        <div class="ta mt40">
          <el-pagination
            layout="  prev, pager, next "
            :page-size="page_size"
            @current-change="current_change"
            :current-page.sync="currentPage"
            :pager-count="5"
            :total="info.total"
            v-if="info.pages > 1"
          >
          </el-pagination>
          <el-empty description="暂无数据" v-if="info.total == 0"></el-empty>
        </div>
      </div>
    </div>
    <!-- 尾部 -->
    <v-foot />
  </div>
</template>

<script>
import vHead from "../../websitecom/Head.vue";
import vFoot from "../../websitecom/Foot.vue";
import vBan from "../../websitecom/Ban.vue";
import vErji from "../../websitecom/Erji.vue";
import { formatDate } from "../../assets/data.js";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    vHead,
    vFoot,
    vBan,
    vErji,
    swiper,
    swiperSlide,
  },
  // 时间戳
  filters: {
    formatDate(time) {
      time = time * 1000;
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  data() {
    return {
      isActive: 1,
      userList: [],
      info: [], //数据
      page_size: 8, //每页多少数据
      currentPage: 1, //默认当前页为第一页
      sort: "id",
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  beforeCreate: function () {
    document.getElementsByTagName("body")[0].className = "active";
    document.getElementsByTagName("html")[0].className = "active";
  },
  mounted() {
    //设置滚动条指定
    document.documentElement.scrollTop = 0;
  },
  created() {
    this.getAllList();
  },
  methods: {
    // 最新发布
    timeClick() {
      this.sort = "create_time";
      this.isActive = 1;
      this.getAllList();
    },
    // 热门点击
    hotClick() {
      this.sort = "views";
      this.isActive = 2;
      this.getAllList();
    },
    // 最多参加
    mostInvolved() {
      this.sort = "join_num";
      this.isActive = 3;
      this.getAllList();
    },

    getAllList() {
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/story/index?page_no=" +
            that.currentPage +
            "&page_size=" +
            that.page_size +
            "&sort=" +
            that.sort +
            "&order=desc&search=title:;"
        )
        .then(function (response) {
          that.userList = response.data.data.data;
          that.info = response.data.data.page;
          //console.log(that.userList);
          //console.log(that.info);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    current_change(currentPage) {
      //改变当前页
      this.currentPage = currentPage;
      this.getAllList();
    },
  },
};
</script>

<style >
html.active {
  overflow-y: scroll !important;
  height: auto !important;
}
@media (max-width: 767px) {
  .story_ul li .right .line2 {
    -webkit-line-clamp: 1;
  }
  .story_ul li .left .img {
    height: auto;
  }
  .story_ul li > div {
    padding: 15px;
  }
  .story_ul li {
    margin-bottom: 15px;
  }
  .story_ul li .left .img {
    height: 100px;
  }
  .story_ul li .left .img img {
    object-fit: cover;
    height: 100%;
  }
  .story_ul li .right .line2 {
    height: 26px;
    line-height: 26px;
  }
  .story_ul li .right {
    padding-left: 15px;
  }
  .story_ul li:last-child {
    margin-bottom: 0;
  }
}
</style>

